<template>
  <div>
    <el-form :inline="true" class="search-form" label-width="100px" size="medium" style="padding-bottom: 10px;">
      <el-form-item label="基本信息：">
        <el-select v-model="res.params.marketId" placeholder="请选择市场" clearable>
          <el-option v-for="item in res.marketOptions" :key="item.marketId" :label="item.marketName" :value="item.marketId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="RFID查询：">
        <el-input clearable v-model="res.params.gateCode"></el-input>
      </el-form-item>
      <el-form-item label="创建时间：">
        <el-date-picker
          v-model="res.params.date"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="截至日期"
          >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="querySubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="res.tableOptions" size="medium" border stripe class="imp-table" v-loading="res.loading">
      <el-table-column label="车辆出入图片" width="170">
        <template slot-scope="scope">
          <img :src="imageUrl +scope.row.carImage+ '.w_150xh_100'" onerror="javascript:this.src='static/images/default.svg';">
        </template>
      </el-table-column>
      <el-table-column label="停车卡号" prop="carCard" align="center"></el-table-column>

      <el-table-column label="停车费用" prop="carFee" align="center" width="120">
        <template slot-scope="scope" v-if="scope.row.carFee">{{scope.row.carFee}}元</template>
      </el-table-column>
      <el-table-column label="车辆RFID" prop="carRfid" align="center"></el-table-column>
      <el-table-column label="状态" align="center" width="120">
        <template slot-scope="scope">
          <el-tag :type="scope.row.carState==1?'success':'warning'">{{scope.row.carState==1?'入场':'出场'}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="时间" align="center">
        <template slot-scope="scope">
          {{scope.row.carCreateTime | filterDateForSec}}
        </template>
      </el-table-column>
      <el-table-column label="所属市场" prop="market.marketName"></el-table-column>

    </el-table>
    <div class="footer">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="res.pageTotal">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        imageUrl: window.imageUrl,
        res: {
          marketOptions: [],
          tableOptions: [],
          params: {
            gateCode: '',
            date: [],
          },
          loading: false,
          pageTotal: 0
        },
        pageIndex: 1,
        pageSize: 10
      }
    },
    created () {
      this.$store.commit('getMarketOptions', this.res)
      this.getAll()
    },
    methods: {
      handleSizeChange (val) {
        this.pageSize = val
        this.getAll()
      },
      handleCurrentChange (val) {
        this.pageIndex = val
        this.getAll()
      },
      querySubmit () {
        this.getAll()
      },
      getQueryAll: function* () {
        this.res.params.date || (this.res.params.date = [])
        yield this.$axios.get(this.$api.getGateCarNum, {params: {marketId: this.res.params.marketId || '', carRfid: this.res.params.gateCode, startTime: this.res.params.date[0], endTime: this.res.params.date[1]}})
        yield this.$axios.get(this.$api.getGateCarList, {params: {marketId: this.res.params.marketId || '', pageIndex: this.pageIndex, pageSize:  this.pageSize, carRfid: this.res.params.gateCode, startTime: this.res.params.date[0], endTime: this.res.params.date[1]}})
        return false
      },
      getAll () {
        let getQueryFn = this.getQueryAll()
        this.res.loading = true
        this.$axios.all([getQueryFn.next()['value'], getQueryFn.next()['value']]).then(this.$axios.spread((prems, acct) => {
          this.res.loading = false
          this.res.pageTotal = ~~prems.data.result.total
          this.res.tableOptions = acct.data.result
        }))
      }
    }
  }
</script>
